<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>QSKJ_LOCAL</title>
    <script type="text/javascript" src="/Public/Build/Cesium/Cesium.js"></script>
    <script type="text/javascript" src="/Public/js/ellipsoidTrailMaterialProperty.js"></script>
    <script src="/Public/js/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="/Public/Build/Cesium/Widgets/widgets.css">
</head>

<body>
    <div id="cesiumContainer"></div>
    <script>
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MjczNDgzMy1hYzE1LTRjNWYtODZhMS01MjZkNWRiMDc2MmUiLCJpZCI6ODIxMzAsImlhdCI6MTY0NDU0ODc0M30.LpGXXWsbQXucV5MTeC2g8BCAQWiZp612gosWcK-7ocE';

        const viewer = new Cesium.Viewer('cesiumContainer', {
            terrain: Cesium.Terrain.fromWorldTerrain(),
        });

        let source = `czm_material czm_getMaterial(czm_materialInput materialInput)
        {
            czm_material material = czm_getDefaultMaterial(materialInput);
            vec2 st = materialInput.st;
            float highlightLength = 0.01;
            float timeFactor = speed * czm_frameNumber * 0.001;
            float highlightStart = fract(timeFactor);
            float highlightEnd = fract(highlightStart + highlightLength);
            float inHighlight = 0.0;

            inHighlight = step(highlightStart, st.s) + step(st.s, highlightEnd);
            
            vec4 colorImage = texture(image, st);
            material.alpha = colorImage.a * color.a;
            material.diffuse = colorImage.rgb * (1.0 + 0.5 * inHighlight);
            return material;
        }`;

        const material = new Cesium.Material({
            fabric: {
                uniforms: {
                    color: Cesium.Color.fromCssColorString("#7ffeff"),
                    image: "/Public/imgs/spriteLineT1.png",
                    speed: 1,
                },
                source,
            },
            translucent: function () {
                return true;
            },
        });
        // 材质着色的外观
        const appearance = new Cesium.PolylineMaterialAppearance();
        appearance.material = material;

        const instance = new Cesium.GeometryInstance({
            geometry: new Cesium.GroundPolylineGeometry({
                positions: Cesium.Cartesian3.fromDegreesArray([
                    114.02, 25.02,
                    114.05, 25.02,
                ]),
                width: 4.0
            }),
            id: 'object returned when this instance is picked and to get/set per-instance attributes'
        });

        viewer.scene.groundPrimitives.add(new Cesium.GroundPolylinePrimitive({
            geometryInstances: instance,
            appearance,
        }));

        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(114.02, 25.01, 10000),
            duration: 0
        })

    </script>
    </div>
</body>

</html>